<template>
  <div class="c">
    <el-form label-position="left" label-width="80px" :model="form">
      <el-form-item :label="t('退款商品') + ':'">
        <div
          class="goods-info"
          v-for="(item, index) in form.goods"
          :key="index"
        >
          <el-image
            class="cover"
            :src="item.image | imgSrc"
            alt=""
            fit="scale-down"
          ></el-image>
          <div class="goods_desc flex-column">
            <span class="name">{{ item.title }}</span>
            <span class="mode">{{
              $t("购物车.颜色") + ":" + item.difference
            }}</span>
            <span class="price">{{ $t("公共.货币符号") }}{{ item.price }}</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item :label="t('退款原因') + ':'">
        <el-select
          v-model="form.reason"
          :placeholder="t('请选择退款原因')"
          value-key="id"
          style="width: 310px; height: 50px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.cause"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="t('商品数量') + ':'">
        <!-- <el-input-number v-model="form.num" :min="1"></el-input-number> -->
        <span style="font-weight: 500; font-size: 18px; color: #010101">{{
          form.pay.refund_price
        }}</span>
      </el-form-item>
      <el-form-item :label="t('商品价格') + ':'">
        <span class="price2"
          >{{ $t("公共.货币符号") }}{{ form.pay.price }}</span
        >
      </el-form-item>
      <el-form-item :label="t('退款说明') + ':'">
        <div
          style="
            position: relative;
            width: 310px;
            height: 99px;
            background: #f9f9f9;
            border-radius: 10px;
          "
        >
          <textarea
            v-model="form.cancel_cause"
            style="
              box-sizing: border-box;
              position: absolute;
              width: 310px;
              height: 99px;
              background: #f9f9f9;
              border-radius: 10px;
              resize: none;
              border: none;
              outline: none;
              padding: 17px 20px;
              font-weight: 400;
              font-size: 16px;
            "
            :placeholder="t('请输入')"
            maxlength="200"
          ></textarea>
          <div
            style="position: absolute; right: 10px; bottom: 8px; line-height: 0"
          >
            {{ form.cancel_cause.length + "/200" }}
          </div>
        </div>
      </el-form-item>
      <el-form-item :label="t('上传图片') + ':'">
        <el-upload
          class="upload"
          :action="upImgSrc()"
          list-type="picture-card"
          :limit="9"
          :headers="{ token: $store.state.token }"
          :on-success="imgUpload"
          :on-remove="imgRemove"
        >
          <div class="tips">
            <i class="el-icon-plus"></i>
            <span class="tip-t">{{ t("图片上传提示") }}</span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button class="btn" @click="submit()">{{ t("提交") }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getCancelOrderCause, orderRefund } from "@/utils/api";
import request from "@/utils/request";
export default {
  props: {
    goods: {
      type: Object,
      default: {},
    },
  },
  watch: {
    goods: {
      deep: true,
      immediate: true,
      handler(n, o) {
        if (n && !o) {
          this.form = this.$util.deepClone(this.goods);
        }
      },
    },
  },
  data() {
    return {
      form: {},
      options: [],
    };
  },
  mounted() {
    getCancelOrderCause().then((res) => {
      if (res.code == 1) {
        this.options = res.data;
      }
    });
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的订单.${v}`);
    },
    upImgSrc() {
      return request.baseURL + "api/common/upload";
    },
    imgUpload(_, __, fileList) {
      this.form.images = fileList.map((e) => e.response.data.url).join(",");
    },
    imgRemove(_, fileList) {
      this.form.images = fileList.map((e) => e.response.data.url).join(",");
    },
    submit() {
      if (!this.form.reason) {
        this.$message.error(this.t("请选择退款原因"));
        return;
      }
      orderRefund({
        order_id: this.form.id,
        order_goods_ids: this.form.goods.map((e) => e.id).join(","),
        refund_cause: this.form.reason.cause,
        refund_content: this.form.cancel_cause || "",
        type: 0,
        images: this.form.images || "",
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.$EventBus.$emit("orderDialogHandle", {
            action: "goods_refund",
            show: false,
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-form-item__label {
  font-weight: 400 !important;
  font-size: 18px !important;
  color: #333333 !important;
  width: 90px !important;
}
.c {
  .goods-info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;

    .cover {
      width: 64px;
      height: 64px;
    }

    .goods_desc {
      margin-left: 10px;
      justify-content: flex-start;
      align-items: flex-start;

      .name {
        color: #000;
        font-size: 16px;
        line-height: normal;
        margin-bottom: 10px;
      }

      .mode {
        color: #999;
        font-size: 14px;
        line-height: normal;
        margin-bottom: 10px;
      }

      .price {
        color: #ff5757;
        font-size: 14px;
        line-height: normal;
      }
    }
  }

  .price2 {
    color: #ff5757;
    font-size: 18px;
  }

  .upload {
    /deep/ .el-upload--picture-card {
      width: 100px;
      height: 100px;
      position: relative;
      border: none;
      background: #f9f9f9;
      border-radius: 10px;
    }

    /deep/ .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
    }

    .tips {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .tip-t {
        color: #999;
        width: 80%;
        line-height: 20px;
      }
    }
  }

  .btn {
    background: #ff5757;
    width: 270px;
    color: #f9f9f9;
    font-size: 16px;
    border-radius: 10px;
  }
}
</style>
